<template>
  <div>
    <slot></slot>
    <el-dialog class="click-count-center-box" top="70px" width="55%"  title="访问记录"  :visible.sync="dialogVisible">
      <div v-if="info.length===0" class="no-tip">
        <span>暂无数据</span>
      </div>
      <div v-else style="max-height: 600px;overflow-y: auto;">
        <div class="item"  v-for="(item,index) of info" :key="index">
          <span class="sort" >{{ index+1 }} </span>
          <span class="code">{{ item.username }}</span>
          <span class="people">{{ item.user }}</span>
          <span class="dept">{{ item.name }}</span>
          <span class = "time">{{ item.timeID }}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import axios from "axios";

export default {
  name: "click-count",
  data(){
    return {
      dialogVisible:false,
      colors:['#FF0000','#FF5E00','#FF8C00','#999999'],
      info: [],
    }
  },
  methods:{
    doShowAll(){
      this.dialogVisible = true
    }
  },
  created() {
    const {showClickCount,systemId} = store.state.setting
    axios.get("http://10.6.1.129/paih_api/getranking1.php",
      {
        params: {
          limit:showClickCount,
          permission:systemId
        }
      }).then(res=>{
      this.info = res.data
    });
  }
};
</script>

<style scoped lang="scss">
.click-count-center-box {
  .el-dialog__body {
    padding: 0px 40px;
  }
  .el-dialog {
    background:var(--header-tip-dialog-background);
  }

  .item {
    margin-top: 4px;
    box-sizing: border-box;
    padding-left: 11px;
    line-height: 24px;
    width: 100%;
    height: 24px;
    background: var(--click-count-item-center-background);

    .sort {
      display: block;
      font-family: "Microsoft YaHei";
      font-size: 16px;
      float: left;
      display: inline-block;
      width: 70px;
    }
    .code{
      display: block;
      margin-left: 35px;
      font-size: 14px;
      float: left;
      color: var(--click-count-box-people-color);
      width: 70px;
    }
    .people {
      overflow: hidden;
      margin-left: 70px;
      font-size: 14px;
      float: left;
      color: var(--click-count-box-people-color);
      width: 70px;
    }
    .dept{
      display: block;
      margin-left: 100px;
      font-size: 14px;
      float: left;
      color: var(--click-count-box-people-color);
    }
    .time {
      display: block;
      font-size: 14px;
      color: var(--click-count-box-people-color);
      float: right;
      margin-right: 11px;
    }
  }


}
</style>
